<template>
  <div class="menu">
    <!-- <el-radio-group v-model="isCollapse">
      <el-radio-button @click="handleExpand" :label="false">expand</el-radio-button>
      <el-radio-button @click="handleCollapse" :label="true">collapse</el-radio-button>
    </el-radio-group> -->

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :background-color="store.MenuBackgroundColor"
      :text-color="store.MenuTextColor"
      :active-text-color="store.MenuTextActiveColor"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 一级菜单 -->
      <template v-for="(item, index) in list" :key="item.id">
        <el-sub-menu :index="item.id + ''">
          <template #title>
            <el-icon v-html="item.icon"></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="(child, index) in item.children" :key="item.id">
            <el-menu-item-group>
              <el-menu-item
                @click="navgateTo(child.path)"
                :index="item.id + ''"
                >{{ child.title }}</el-menu-item
              >
            </el-menu-item-group>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { list } from "./page";
import { ref } from "vue";
import router from "@/libs/router";

import location from "@/styles/icon/location-icon.vue";
import { themePinia } from "@/libs/pinia/theme";

const store = themePinia();

const isCollapse = ref();

const navgateTo = (path: any) => {
  router.push(path);
};

const emit = defineEmits(["handleExpandEmit", "handleCollapseEmit"]);

const handleOpen = (key: string, keyPath: string[]) => {};
const handleClose = (key: string, keyPath: string[]) => {};

const handleExpand = () => {
  emit("handleExpandEmit");
};

const handleCollapse = () => {
  emit("handleCollapseEmit");
};
</script>

<style>
.menu {
  position: relative;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  position: relative;
  width: 220px;
  /* padding-top: 3rem; */
  min-height: 400px;
  border-right: 0;
  /* overflow-x: hidden; */
}
.icon {
  display: flex;
  width: 0.6rem;
  height: 100%;
}
</style>
